<template>
  <div>
    <!--        全屏模式-->
    <div
        :element-loading-text="text"
        class="w-full h-3/4 "
        element-loading-background="rgba(0, 0, 0, 0.8)"
        element-loading-spinner="el-icon-loading"
    >
      <!--            头部区域-->
      <div
          class="flex flex-wrap pt-10 bg-gray-900 text-yellow-300 pb-10 items-center  glow md:flex-row-reverse mb-10">
        <p class="flex w-full justify-center items-center text-3xl text-gray-200 ">
          小红袍餐饮管理系统
        </p>
        <div class="w-full md:w-1/2 lg:w-5/12 ml-auto md:mr-auto">
          <img
              alt="Web development services"
              class="animate-pulse w-full mx-auto    max-w-xs lg:max-w-sm"
              src="/static/images/application.svg">
        </div>
        <div class="w-full md:w-1/2 text-center">
          <h2 class="font-semibold uppercase text-1xl lg:text-2xl text-center pb-5">系统简介
            <span class="mx-auto w-24 h-1 block mt-1 border-b-2 border-yellow-500"></span>
          </h2>
          <p class="w-full md:px-3 lg:px-0 mx-auto mb-5">
            商品管理、交易查询、订单管理
          </p>
          <span
              class="relative text-black text-xs bg-white py-3 px-4 rounded-full font-semibold uppercase rise hover:text-black inline-block"
          >
                    感谢使用
                    </span>
          <span
              class="relative text-black text-xs bg-white py-3 px-4 rounded-full font-semibold uppercase rise hover:text-black inline-block"
          >{{ nowDate }}
                    </span>

        </div>
        <div class="text-sm my-6 ">
          <p>
            <el-button type="danger" @click="deployment">一键部署</el-button>
          </p>
          <span>
                        本站由后台laravel8框架+mysql5.6数据库+阿里云短信服务集成完成。<br/>
                        后台管理:采用单页面应用vue2+elementUI。<br/>
                        前台页面:由laravel8集成blade模板编写，扩展集成captcha验证码管理，easy-sms短信服务包。<br/>
                        主要扩展包:tailwindcss，wangeditor、dayjs、axios等。

                    </span>
        </div>

      </div>

      <div>
      </div>

    </div>
  </div>
</template>

<script>

export default {
  route: {path: '/', meta: {title: '数据中心'}},
  data() {
    return {
      nowDate: '',
      text: '初始化权限中...',
      show: false,

    }
  },
  mounted() {
    this.currentTime();
    // 模拟请求耗时2s
  },
  methods: {
    deployment() {
      this.initPermission()
    },
    initPermission() {
      const loading = this.$loading({
        lock: true,
        text: this.text,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(async () => {
        await this.axios.post('admin/permission/init')
        this.show = false
      }, 2000);
    },

    currentTime() {
      setInterval(this.formatDate, 500);
    },
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
    },
  },

// 销毁时清除计时器
// 销毁定时器
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
    }
  }

}
</script>

<style lang="scss">
.dv-full-screen {
  background-color: #000;
  color: white;
}
</style>
